<template>
    <div id="drag">
        <div class="title">
            <span>拖拽</span>
        </div>
        <div class="content">
            <ul>
                <li class="bg"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</template>

<script setup>
// console.log($)
import { onMounted } from '@vue/runtime-core';
import $ from 'jquery'

for (let i = 0; i < 9; i++) {
    let background = randomHexColor();
    // console.log(background)

}
function randomHexColor() { //随机生成十六进制颜色
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}
onMounted(() => {
    // $('#drag').mousedown(function (e) {
    //     // 获取当前x,y的坐标
    //     var x = e.pageX;
    //     var y = e.pageY;
    //     // 获取x和y的坐标对象
    //     var divx = $(this).offset().left;
    //     var divy = $(this).offset().top;
    //     // 鼠标移动的事件，绑定在dom顶层对象 document
    //     $(document).bind('mousemove', function (event) {
    //         var x2 = event.pageX;
    //         var y2 = event.pageY;
    //         $('#drag').css({
    //             top: divy + (y2 - y) + 'px',
    //             left: divx + (x2 - x) + 'px'
    //         });
    //     })

    // })
    // $('#drag').mouseup(function () {
    //     $(document).unbind('mousemove')
    // })
    function Drag() {
      this.oDiv=document.getElementById('drag');
      this.disY = 0;
      let _this = this;
      this.oDiv.onmousedown=function(ev){
        let oEvent=ev;
        _this.fnDown(oEvent);
        _this.oDiv.setCapture && _this.oDiv.setCapture();
        return false;
      };
    }
    Drag.prototype.fnDown=function(ev){
      let oEvent=ev;
      let _this=this;
      this.disY=oEvent.clientY-this.oDiv.offsetTop;
      document.onmousemove=function(ev){
        let oEvent=ev;
        _this.fnMove(oEvent);
      };
      document.onmouseup=function(){
        _this.fnUp();
      };
    }

    Drag.prototype.fnMove=function(ev) {
      var ev = ev || event;
      var T = ev.clientY - this.disY;
      if ( T < 0 ) {
        T = 0;
      } else if ( T > document.documentElement.clientHeight - this.oDiv.offsetHeight ) {
        T = document.documentElement.clientHeight - this.oDiv.offsetHeight;
      }
      this.oDiv.style.top = T + 'px';
    }

    Drag.prototype.fnUp=function(){
      document.onmousemove=null;
      document.onmouseup=null;
      this.oDiv.releaseCapture && this.oDiv.releaseCapture();
    };
    new Drag();

})



</script>